<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../src/css/table-gray.css">
    <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
    <script src="../src/js/jquery-dataGrid.js"></script>
</head>
<body>
<!--初始化表的容器-->
<div id="toolbar">
    <label for="keyword">关键字：</label>
    <input type="text" id="keyword">
    <button id="query">查询</button>
    <button id="fresh">刷新</button>
</div>
<div id="grid"></div>
<script>
    $(function(){
        loadData();
    });
    //load data from remote server
    var $grid;
    function loadData(){
        $grid = $("#tg").grid({
            url: "../test/courseGrid2",
            method: 'POST',
            params:{
                keyword: $("#keyword").val()
            },
            pageSize: 10,
            fillWithEmptyRows: true,
            pageIndexField:'offset',//自定义页面发送字段名
            pageSizeField:'limit',//自定义页面size发送字段名
            columns: [{
                field: 'id',
                checkbox: true,
                width: 5,
                align: 'center'
            }, {
                field: 'index',
                title: '序号',
                width: 5,
                align: 'center'
            }, {
                field: 'name',
                title: '名称',
                width: 15,
                align: 'center'
            }, {
                field: 'hour',
                title: '课时数',
                width: 15,
                align: 'center',
                render: function(value){
                    return value||"";
                }
            }, {
                field: 'methodName',
                title: '授课方式',
                width: 10,
                align: 'center',
                render:function(value){
                    if(value == 1){
                        return "一对多";
                    }else if(value == 2){
                        return "一对一";
                    }
                }
            }, {
                field: 'operation',
                title: '操作',
                width: 200,
                align: 'center',
                render: function (value,row) {
                    return '<a class="tabLinks" href="#">详细信息</a>';
                }
            }]

        });//end
    }
    //根据参数重新查询
    $("#query").on('click',function(){
        $grid.grid('load', 1,{
            keyword: $("#keyword").val()
        });
    })
    //刷新
    $("#fresh").on("click",function(){
        $("#grid").grid('reload');
        //或者$grid.grid("reload");
    })
</script>
</body>
</html>